import React from 'react';
import { View } from 'react-native';
import PropTypes from 'prop-types';
import Swatch from './Swatch';
import fn from '../../components/PlateformHalf';

const SWATCH_WIDTH = fn(100);

const Palette = ({ colors }) => (
  <View
    style={{
      width: (SWATCH_WIDTH + 24) * 4,
      flexWrap: 'wrap',
      flexDirection: 'row',
      justifyContent: 'flex-start',
    }}
  >
    {Object.keys(colors).map(name => <Swatch key={name} color={colors[name]} name={name} />)}
  </View>
);
Palette.defaultProps = {
  colors: null,
};
Palette.propTypes = {
  /**
   * ### Palette 属性说明
   *
   * 展示颜色色板
   *
   * | Name | Type | Default | Details | isRequired |
   * | ------:| -----------:| -----------: | -----------: | ------:|
   * | colors | object | | 颜色对象 | no |
   *
   * ### Palette 代码示例(详见示例项目)
   *
   * ```html
   * <Palette theme={colors} />
   * ```
   */
  colors: PropTypes.instanceOf(Object),
};

export default Palette;
